<template>
    <block v-if="scene == 1154">
    	<pyq-open-chunk></pyq-open-chunk>
    </block>
    <block v-else>
        <view class="page bg-fff">
            <up-tabs :list="list" :current="current" lineColor="#007235" keyName="name" @click="change"></up-tabs>
            <view class="calcCard bg-theme boxShow col-fff">
                <view class="monthMoney flex">
                    <view>
                        <view class="money flex">
                            <view class="font35 fontBold fontNum">{{formatPrice(monthPay)}}</view>元
                        </view>
                        {{current ==0?'每月还款金额不变':`首月还款，每月递减${MonthDiffMoney}元`}}
                    </view>
                    <view></view>
                </view>
                <view class="cardBottom flex">
                    <view class="item">
                        <view class="numBox fontBold">{{formatThousand(totalAmount)}}万</view>
                        <text class="font12">还款总额</text>
                    </view>
                    <view class="item">
                        <view class="numBox fontBold">{{formatThousand(totalInterest)}}万</view>
                        <text class="font12">支付利息</text>
                    </view>
                    <view class="item">
                        <view class="numBox fontBold">{{formatThousand(amountDai)}}万</view>
                        <text class="font12">贷款金额</text>
                    </view>
                    <view class="item" v-if="sy_months>0">
                        <view class="numBox fontBold">{{sy_months/12}}年</view>
                        <text class="font12">商贷年数</text>
                    </view>
                    <view class="item" v-if="gjj_months>0">
                        <view class="numBox fontBold">{{gjj_months/12}}年</view>
                        <text class="font12">公积金贷</text>
                    </view>
                </view>
            </view>
            
            <!-- <view class="listBox font13">
                <view class="list flex fontBold">
                    <view class="item item1">期数</view>
                    <view class="item item2">月供总额</view>
                    <view class="item item3">月供本金</view>
                    <view class="item item4">月供利息</view>
                    <view class="item item5">剩余还款总额</view>
                </view>
                <block v-for="(item,index) in 10" :key="index">
                    <view class="list flex">
                        <view class="item item1">{{index+1}}</view>
                        <view class="item item2">10000000</view>
                        <view class="item item3">10000000</view>
                        <view class="item item4">10000000</view>
                        <view class="item item5">10000000</view>
                    </view>
                </block>
            </view> -->
        </view>
    </block>
</template>

<script>
    import { mapState } from 'pinia';
    import { useUserInfoStore, useConfigStore } from '@/store/index';
    import { benxiMonthPay, benXiTotalInterest, benJinMonthPay, benJinMonthDiff, benJinTotalInterest } from '@/common/common';
	export default {
		data() {
			return {
				list: [{
                    name: '等额本息'
                }, {
                    name: '等额本金'
                }],
                current: 0,
                monthPay: 0,
                MonthDiffMoney: 0,
                totalInterest: 0,
                amountDai: 0,
                sy_months: 0,
                gjj_months: 0,
                sy_amount: 0,
                sy_rate: 0,
                gjj_amount: 0,
                gjj_rate: 0,
                totalAmount: 0,
			}
		},
        computed:{
        	...mapState(useUserInfoStore, ['userInfo']),
            ...mapState(useConfigStore, ['scene'])
        },
        onShareAppMessage(res) {
            return {
                title: `房贷计算器`,
                path: `/pages/tools/calculator/mortgage-calculate?puid=${this.userInfo.id}`,
            }
        },
        
        onShareTimeline() {
            return {
                title: `房贷计算器`,
                query: `puid=${this.userInfo.id}`
            }
        },
        
		onLoad(options) {
            //朋友圈进入小程序快照场景
            if(this.scene == 1154) return;
            
            let { sy_months, gjj_months, sy_amount=0, gjj_amount=0, sy_rate=0, gjj_rate=0 } = options;
            this.sy_months = parseFloat(sy_months);
            this.gjj_months = parseFloat(gjj_months);
            this.sy_amount = parseFloat(sy_amount);
            this.sy_rate = parseFloat(sy_rate);
            this.gjj_amount = parseFloat(gjj_amount);
            this.gjj_rate = parseFloat(gjj_rate);
            this.calcFun();
            uni.$check_and_login();
		},
		methods: {
			change({index}) {
                this.current = index;
                this.calcFun();
            },
            calcFun(){
                //等额本息
                this.amountDai = this.sy_amount+this.gjj_amount;
                if(this.current == 0) {
                    let syMonthPay = benxiMonthPay({
                        amount: this.sy_amount,
                        rate:  this.sy_rate,
                        months: this.sy_months
                    });
                    let gjjMonthPay = benxiMonthPay({
                        amount: this.gjj_amount,
                        rate:  this.gjj_rate,
                        months: this.gjj_months
                    });

                    this.monthPay = syMonthPay+gjjMonthPay;
                    
                    let syTotalInterest = benXiTotalInterest({
                        amount: this.sy_amount,
                        rate:  this.sy_rate,
                        months: this.sy_months
                    });
                    let gjjTotalInterest = benXiTotalInterest({
                        amount: this.gjj_amount,
                        rate:  this.gjj_rate,
                        months: this.gjj_months
                    });
                    this.totalInterest = syTotalInterest+gjjTotalInterest;
                    this.totalAmount = this.sy_amount+this.gjj_amount+syTotalInterest+gjjTotalInterest;
                }else{
                    let syFirstMonthPay = benJinMonthPay({
                        amount: this.sy_amount,
                        rate:  this.sy_rate,
                        months: this.sy_months,
                        returnedAmount: 0
                    })
                    let gjjFirstMonthPay = benJinMonthPay({
                        amount: this.gjj_amount,
                        rate:  this.gjj_rate,
                        months: this.gjj_months,
                        returnedAmount: 0
                    })
                    this.monthPay = syFirstMonthPay + gjjFirstMonthPay;
                    let syMonthDiffMoney = benJinMonthDiff({
                        amount: this.sy_amount,
                        rate:  this.sy_rate,
                        months: this.sy_months
                    });
                    let gjjMonthDiffMoney = benJinMonthDiff({
                        amount: this.gjj_amount,
                        rate:  this.gjj_rate,
                        months: this.gjj_months
                    });
                    this.MonthDiffMoney = (syMonthDiffMoney+gjjMonthDiffMoney).toFixed(2);
                    
                    let syTotalInterest = benJinTotalInterest({
                        amount: this.sy_amount,
                        rate:  this.sy_rate,
                        months: this.sy_months
                    })
                    let gjjTotalInterest = benJinTotalInterest({
                        amount: this.gjj_amount,
                        rate:  this.gjj_rate,
                        months: this.gjj_months
                    })
                    this.totalInterest = syTotalInterest+gjjTotalInterest;
                    this.totalAmount = this.sy_amount+this.gjj_amount+syTotalInterest+gjjTotalInterest;
                }
            },
            formatPrice: function(price){
                return Math.round(price*100)/100
            },
            formatThousand: function(price) {
                return Math.round(price/10000*100)/100
            }
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		line-height: 1;
		min-height: 100vh;
		overflow: hidden;
        .calcCard{
            margin: 30rpx;
            padding: 30rpx 0rpx;
            border-radius: 20rpx;
            .monthMoney{
                justify-content: space-between;
                margin: 30rpx;
                .money{
                    justify-content: flex-start;
                    align-items: flex-end;
                    margin-bottom: 10rpx;
                }
            }
            .cardBottom{
                margin-top: 40rpx;
                .item{
                    flex: 1;
                    text-align: center;
                    .numBox{
                        margin-bottom: 10rpx;
                    }
                }
            }
        }
        .listBox{
            .list{
                height: 80rpx;
                &:nth-child(odd) {
                    background-color: $theme-bg-opacity;
                }
                .item{
                    text-align: center;
                }
                .item1{
                    flex: 3;
                }
                .item2{
                    flex: 5;
                }
                .item3{
                    flex: 5;
                }
                .item4{
                    flex: 5;
                }
                .item5{
                    flex: 6;
                }
            }
        }
	}
</style>
